<template>
  <div class="login container">
    <my-header></my-header>
    <section>
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
        <el-form-item label="手机号" prop="usertel">
          <el-input v-model="loginForm.usertel"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="phoneValidate">
          <el-input v-model="loginForm.phoneValidate"></el-input>
          <el-button type="primary" @click="sendCode" :disabled="disabled">
            {{ codeMsg }}
          </el-button>
        </el-form-item>
      </el-form>
      <div class="login-div">
        <el-button class="login-btn" @click="loginOk">登录</el-button>
      </div>
      <div class="login-span">
        <span @click="goPwsLogin">密码登录</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../../components/common/Tabbar.vue";
import MyHeader from "./MyHeader.vue";
import axios from "axios";
import qs from "qs";
export default {
  name: "Login",
  components: {
    Tabbar,
    MyHeader,
  },
  data() {
    var checkPhone = (rule, value, cb) => {
      const rulePhone = /^1[23456789]\d{9}$/;
      if (rulePhone.test(value)) return cb();
      cb(new Error("请输入合法的手机号"));
    };
    return {
      //验证码是否能点击
      disabled: false,
      codeTime: 6,
      codeMsg: "获取验证码",
      code: "", //接收到的短信验证码
      token: "", //
      loginForm: {
        usertel: "18685745895",
        phoneValidate: "",
      },
      loginFormRules: {
        usertel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        phoneValidate: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    loginOk() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        if (this.loginForm.phoneValidate == this.code) {
          console.log();
          this.$message.success("登录成功");
          window.sessionStorage.setItem("token", this.token);
          this.$router.push("/home");
        }
      });
    },
    goPwsLogin() {
      this.$router.push("/pwsLogin");
    },
    goRegister() {
      this.$router.push("/register");
    },

    //获取短信验证码
    sendCode() {
      if (!this.loginForm.usertel) return;
      //请求短信验证码
      this.$http.post("/login", qs.stringify(this.loginForm)).then((res) => {
        console.log(res);
        this.token = res.token.token;
        this.code = res.data.data;
      });
      this.disabled = true;
      //倒计时
      let timer = setInterval(() => {
        --this.codeTime;
        this.codeMsg = `重新发送${this.codeTime}`;
      }, 1000);
      setTimeout(() => {
        clearInterval(timer);
        this.codeTime = 6;
        this.disabled = false;
        this.codeMsg = "获取验证码";
      }, 6000);
      // });
    },
  },
};
</script>

<style lang="less" scoped>
section {
  background-color: #f5f5f5;
  .el-form {
    margin: 20px 50px;
    font-size: 16px;
    .el-form-item {
      display: flex;
      width: 250px;
      .el-button {
        margin-top: 10px;
      }
    }
  }
}
.login-div {
  text-align: center;
}
.login-btn {
  width: 80%;
  font-size: 18px;
  background-color: rgb(20, 135, 118);
  color: #fff;
  height: 40px;
}
.login-span {
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  font-size: 15px;
  color: #606266;
}
</style>